<template>
  <div class="detail">
    <!-- 商品参数选择 -->
    <div class="pct">
      <div>
        <div class="pct-img">
          <el-image
            v-for="(item, index) in product.imgurlList"
            :key="index"
            fit="cover"
            v-show="item === getUrl"
            :src="item"
          ></el-image>
        </div>
        <div class="pct-imglist">
          <div>
            <i
              class="el-icon-arrow-left"
              @click="imgPager.pagerIndex > 1 ? imgPager.pagerIndex-- : ''"
            ></i>
          </div>
          <div
            class="img-item"
            v-for="(item, index) in getImgUrlList"
            :key="index"
            @mouseenter="enterEvt(item, $event)"
          >
            <el-image fit="cover" :src="item"></el-image>
          </div>
          <div>
            <i
              class="el-icon-arrow-right"
              @click="
                imgPager.pagerIndex * imgPager.pagerSize <
                product.imgurlList.length
                  ? imgPager.pagerIndex++
                  : ''
              "
            ></i>
          </div>
        </div>
      </div>
      <div class="explain">
        <div class="pct-name">
          <span>{{ product.name }}</span>
        </div>
        <div class="price">
          <div>价格：</div>
          <div>
            ￥<span>{{ buy.price }}</span>
          </div>
        </div>
        <div class="pct-address">
          <div>配送至：</div>
          <div>福建龙岩市新罗区曹溪街道</div>
        </div>
        <div
          class="sku"
          v-for="(item, index) in product.propertys"
          :key="index"
        >
          <div>选择{{ item.propertyName }}:</div>
          <ul>
            <li
              ref="sku"
              class="sku-li"
              :class="`property-${item.id}`"
              v-for="(pv, pvIndex) in item.propertyValues"
              :key="pvIndex"
              @click="handerChangeSku(item.id, pv.id, $event)"
            >
              {{ pv.value }}
            </li>
          </ul>
        </div>
        <div class="pct-count">
          <div class="tl">数量:</div>
          <div class="num">
            <el-input-number
              size="mini"
              v-model="buy.count"
              @change="handleChangeCount"
              :min="1"
              label="描述文字"
            ></el-input-number>
          </div>
        </div>
        <div class="buy">
          <div class="buy-btn" @click="buyShop">立即购买</div>
          <div class="bycar-btn" @click="addShopCar">加入购物车</div>
        </div>
      </div>
    </div>
    <!-- 商品相关 -->
    <div class="pct-move">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <!-- 商品介绍 -->
        <el-tab-pane label="商品介绍" name="presentation">
          <Presentaion :presentations="presentations" />
        </el-tab-pane>
        <!-- 商品评论 -->
        <el-tab-pane label="商品评价" name="evaluate">
          <Evaluate :shopid="product.id" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 支付弹窗 -->
    <div>
      <Pay
        :dialog="dialog"
        :money="buy.price"
        @dialogEvt="handelDialog"
        @pay="handelbuyClick"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.detail {
  // border: 1px solid orange;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;

  .pct {
    display: flex;
    min-height: 600px;

    .explain {
      height: 500px;
      width: 100%;
      font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB,
        "\u5b8b\u4f53", sans-serif;
      color: #666;
      ul {
        list-style-type: none;
      }
      .pct-name {
        margin-left: 20px;
        font: 700 16px Arial, "microsoft yahei";
        color: #666;
        padding-top: 10px;
        line-height: 28px;
      }
      .price div:nth-child(2) {
        font-size: 22px;
        color: #e4393c;
      }

      .pct-address,
      .price,
      .sku,
      .pct-count {
        display: flex;
        // border: 1px solid orangered;
        margin-top: 18px;
        margin-left: 20px;
      }
      .sku {
        overflow: hidden;

        .sku-li {
          float: left;
          padding: 6px 10px;
          border: 1px solid #cccccc;
          margin-right: 30px;
          margin-bottom: 10px;
        }
        .sku-li-click {
          border: 1px solid red;
        }
        .sku-li:hover {
          border: 1px solid red;
          cursor: pointer;
        }
      }

      .pct-address div:nth-child(1),
      .price div:nth-child(1),
      .sku div:nth-child(1) {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        line-height: 32px;
        font-family: simsun;
        color: #999;

        // border: 1px solid;
      }
      .pct-address,
      .price,
      div:nth-child(2) {
        line-height: 32px;
      }
      .pct-count .tl {
        width: 100px;
        line-height: 32px;
        font-family: simsun;
        color: #999;
      }
      .pct-count .num {
        // width: 140px;
        .el-input-number {
          width: 127px;
        }
      }
      .buy {
        display: flex;
        padding-left: 120px;
      }
      .buy-btn {
        background-color: #ffeded;
        color: #ff0036;
        border: 1px solid #ff0036;
        line-height: 36px;
      }
      .bycar-btn {
        margin-left: 60px;
        background-color: #ff0036;
        color: #ffffff;
        line-height: 38px !important;
      }
      .buy-btn,
      .bycar-btn {
        margin-top: 50px;
        width: 178px;
        // height: 38px;

        text-align: center;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .pct-imglist {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      i {
        font-size: 32px;
        padding: 4px;
        margin-top: 12px;
      }
      i:hover {
        background-color: rgb(207, 205, 205);
        border-radius: 50%;
      }
      .img-item {
        width: 58px;
        height: 58px;
        max-height: 58px;
        min-width: 58px;
        overflow: hidden;
        border: 1px solid blue;
        margin: 0 10px;
        border: 2px solid white;
        .el-image {
          width: 58px;
          height: 58px;
        }
      }
      .img-itemhover {
        border: 2px solid red;
      }
    }
    .pct-img {
      width: 450px;
      height: 450px;
      max-width: 450px;
      max-height: 450px;
      overflow: hidden;
      border: 1px solid #eee;
      display: flex;
      .el-image {
        margin: auto;
      }
    }
  }
  .pct-move {
    margin-left: 160px;
    // border-left: 1px solid orange;
    overflow: hidden;
    min-height: 400px;

    // .el-tabs__item.is-active{
    //   color: #ff0036 !important;
    // }
  }
}
</style>
<style lang="scss">
.el-tabs__item.is-active {
  color: #ff0036;
}
#tab-presentation:hover,
#tab-evaluate:hover {
  color: #ff0036;
}
</style>

<script>
import Presentaion from './presentation'
import Evaluate from './evaluate'
import { getProductDetail, PayOrder, AddShopCart } from '../../api/detais'
import { url } from '../../utils/request'
import Pay from '../buy/pay.vue'
export default {
  components: {
    Presentaion,
    Evaluate,
    Pay
  },
  data () {
    return {
      dialog: false,
      bigImg: '', // 左边大图片url
      element: null,
      activeName: 'presentation',
      imgPager: {
        pagerIndex: 1,
        pagerSize: 4
      },
      product: {
        id: 1,
        name: '',
        price: 0,
        propertys: [],
        imgurlList: []
      },
      // 商品介绍
      presentations: [],
      // 选中商品参数值
      buy: {
        price: 0,
        count: 1,
        payName: '',
        skus: []
      }
    }
  },
  mounted () {
    document.documentElement.scrollTop = 0
    // 获取商品详情
    getProductDetail(this.$route.query.shopid).then((res) => {
      console.log(res)

      const product = res.data.data.commodity
      this.product.id = product.id
      this.product.name = product.productName
      this.product.price = parseFloat(product.price)

      var imgurlList = []
      product.coverPicture.split(' ').forEach((item) => {
        imgurlList.push(`${url}/uploadfiles/${item}`)
      })

      product.introduction.split(' ').forEach((item) => {
        this.presentations.push(`${url}/uploadfiles/${item}`)
      })
      this.product.imgurlList = imgurlList
      this.product.propertys = res.data.data.propertys
      this.$nextTick(() => {
        this.getDefaultSkus()
      })
    })
  },
  watch: {
    $route (route) {
      document.documentElement.scrollTop = 0
    }
  },
  methods: {
    handelDialog (data) {
      this.dialog = data
    },
    // 鼠标移入
    enterEvt (url, evt) {
      if (this.element) {
        this.element.classList.remove('img-itemhover')
      }
      evt.target.classList.add('img-itemhover')
      this.bigImg = url
      this.element = evt.target
    },
    // 默认sku组
    getDefaultSkus () {
      this.buy.price = this.product.price
      this.product.propertys.forEach((item) => {
        this.buy.price += parseFloat(item.propertyValues[0].price)
        this.buy.skus.push([item.id, item.propertyValues[0].id])
      })
      console.log(this.buy)
      this.product.propertys.forEach((pty) => {
        let isAdd = true
        this.$refs.sku.forEach((item) => {
          if (isAdd && item.className === `sku-li property-${pty.id}`) {
            isAdd = false
            item.style.border = '1px solid #FF0036'
          }
          // console.log(item.className);
        })
        isAdd = true
      })
    },
    // 改变商品数量触发
    handleChangeCount (value) {
      console.log(value)
    },
    // 选择商品属性
    handerChangeSku (keyId, valueId, event) {
      this.$refs.sku.forEach((item) => {
        if (item.className === `sku-li property-${keyId}`) {
          item.style.border = ''
        }
      })
      event.target.style.border = '1px solid #FF0036'
      let isAdd = true
      this.buy.skus.forEach((item, index) => {
        if (item[0] === keyId) {
          const propertyValues = this.product.propertys.filter(
            (pt) => pt.id === keyId
          )[0].propertyValues

          const newPrice = propertyValues.filter((ptv) => ptv.id === valueId)[0]
            .price
          const oldPrice = propertyValues.filter((ptv) => ptv.id === item[1])[0]
            .price
          this.buy.price =
            this.buy.price - parseFloat(oldPrice) + parseFloat(newPrice)

          this.buy.skus.splice(index, 1, [keyId, valueId])
          isAdd = false
        }
      })

      if (isAdd) this.buy.skus.push([keyId, valueId])
    },
    // 加入购物车
    addShopCar () {
      AddShopCart({
        price: this.buy.price,
        paymentName: this.buy.payName,
        count: this.buy.count,
        commodityId: this.$route.query.shopid,
        sku: this.buy.skus
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
        // console.log(res)
      })
    },
    // 立即购买
    buyShop () {
      console.log()
      // alert(`立即购买成功\n${JSON.stringify(this.buy)}`)
      this.dialog = true
    },
    handleTabClick (tab, event) {
      console.log(tab, event)
    },
    // 确定购买（提交表单）
    handelbuyClick (payname) {
      this.buy.payName = payname
      console.log(this.buy)
      PayOrder({
        price: this.buy.price,
        paymentName: this.buy.payName,
        count: this.buy.count,
        commodityId: this.$route.query.shopid,
        sku: this.buy.skus
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
        console.log(res)
      })
    }
    // 加入购物车
  },
  computed: {
    getUrl () {
      if (this.bigImg) return this.bigImg
      return this.product.imgurlList[0]
    },
    getImgUrlList () {
      const i = (this.imgPager.pagerIndex - 1) * this.imgPager.pagerSize
      console.log(i)
      return this.product.imgurlList.filter(
        (item, index) => index >= i && index <= i + 3
      )
    }
  }
}
</script>

<style>
</style>
